import {EChartsOption} from 'echarts';
import {Injectable} from '@angular/core';
import {getRandomColor} from '../../../utils';

const colorArray = [];

for (let i = 0; i < 4; i++) {
  colorArray.push(getRandomColor());
}

@Injectable({
  providedIn: 'root'
})
export class EchartOptions {
  public faultOption: EChartsOption =
    {
      color: ['#c23531', '#755154', '#61a0a8', '#cccccc', '#08e08e'],
      title: {
        text: '设备故障率',
        top: '10px',
        textStyle: {
          color: '#f0f0f2'
        },

      },
      tooltip: {
        trigger: 'item',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: '最近一月 <br/> {a}：{c}%'
      },
      textStyle: {
        color: '#fff'
      },
      grid: {
        height: '60%',
        bottom: '20%'
      },
      xAxis: {
        show: false,
        type: 'category',
        axisLine: {show: false},
        axisTick: {show: false},
      },
      yAxis: {
        show: false,

      },
      label: {
        color: 'inherit'
      },
      series: [],

      legend: {
        show: true,
        type: 'plain',
        data: [],
        bottom: 0,
        width: '80%',
        textStyle: {
          color: '#fff'
        }
      }
    };

  public transformerOption: EChartsOption =
    {
      xAxis: {
        show: false
      },
      yAxis: {
        axisLine: {show: false},
        axisTick: {show: false},
        data: ['变压器D', '变压器C', '变压器B', '变压器A']
      },
      textStyle: {
        color: '#fff'
      },
      series: [{
        data: [{value: 67.2, itemStyle: {color: colorArray[0]}, label: {color: colorArray[0]}},
          {value: 68.8, itemStyle: {color: colorArray[1]}, label: {color: colorArray[1]}},
          {value: 40.9, itemStyle: {color: colorArray[2]}, label: {color: colorArray[2]}},
          {value: 50.3, itemStyle: {color: colorArray[3]}, label: {color: colorArray[3]}}],
        type: 'bar',
        label: {
          show: true,
          position: 'right',
          formatter: (params) => params.value + '%'
        }
      }],
      tooltip: {
        show: true,
        trigger: 'item',
        formatter: '{b}: ({c}%)'
      },
      grid: {
        left: '20%',
        width: '64%',
        // height: 150
      },
      title: {
        text: '变压器负荷率',
        top: '10px',
        textStyle: {
          color: '#f0f0f2'
        }
      }
    };
}

